<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
	<title>Loading Topic</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<link rel="icon" type="image/vnd.microsoft.icon" href="images/eckoit.ico">
    <link rel="stylesheet" type="text/css" href="styles/common.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles/color.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles/wikid2.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles/tray.css"  />
	<link rel="stylesheet" type="text/css" href="styles/pepper-grinder/jquery-ui-1.8.5.custom.css"  />
    <link rel="stylesheet" type="text/css" href="skin/jplayer.blue.tuesday.css"  />	
	<link rel="stylesheet" type="text/css" media="screen, projection" href="styles/horizontal.css" />
    <style media="screen" type="text/css">

    /* --> */
    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    .col1 {
	    width:100%;
	}
    </style>
    <![endif]-->
        <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-ui-1.8.5.custom.min.js."></script>
    <script type="text/javascript" src="scripts/underscore-min.js"></script>
	<script type="text/javascript" src="scripts/wikid-0.2.js"></script>
	<script type="text/javascript" src="scripts/jquery.parsequery.js"></script>
	<script type="text/javascript" src="scripts/showdown.js"></script>
	<script type="text/javascript" src="scripts/jsonpath-0.8.0.js"></script>
	 <script type="text/javascript" src="scripts/jquery.corner.js"></script>
	 <script type="text/javascript" src="scripts/couch.js"></script> 
	 <script type="text/javascript" src="scripts/futon.format.js"></script> 
	 <script type="text/javascript" src="scripts/jquery.couch.js"></script> 
	 <script type="text/javascript" src="scripts/jquery.suggest.js"></script> 
	 <script type="text/javascript" src="scripts/jquery.timeago.js"></script>
	 <script type="text/javascript" src="scripts/menu.js"></script>
    <script type="text/javascript" src="scripts/jquery.md5.js"></script>
    <script type="text/javascript" src="scripts/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="scripts/shortcuts.js"></script>
    <script type="text/javascript" src="scripts/jquery.lasso.js"></script>
    <script type="text/javascript" src="scripts/jquery.heatcolor.0.0.1.js"></script>
    <script type="text/javascript" src="scripts/date.js" ></script>
	 <script type="text/javascript">
	    $(function() {


			$("#dialog-skype").dialog({
				autoOpen: false,
				resizable: false,
				modal: true,
				buttons : {
					'Yes, Start Tagging' : function() {},
					'Cancel' : function() {
						$(this).dialog('close');
					}
				
				}
			});


			var db_name = wikid.parseDBname(window.location);
			var wikid_id = wikid.parseTopicName(window.location);
			var db = new CouchDB(db_name, {"X-Couch-Full-Commit":"true"});
			var doc = db.open(wikid_id);
            if (!doc) {
                $('#taglist').hide();
                var readableId = wikid.titleFromTopicId(wikid_id);
                $('.readableId').text(readableId);
                document.title = wikid.documentTitle(readableId);
                var add = $('<p class="notFound">This document does not exist. <a href="edit.html?' + wikid_id + '">Create it.</a></p>');
                $('#maincontent').append(add);                
                return;
            }
			var result = wikid.toWikid(doc, db, 'wikid');
			$('.readableId').text(result.topic);
            $('#titleHolder').attr('title', wikid_id);
			document.title = result.title;
			if (result.wiki) {
				$('#Wiki').html(result.wiki);
			}
			var lastmodified_val = result.doc['-lastmodified'];
			if (lastmodified_val) {
				var lastmodified = $.timeago(lastmodified_val);
				$('#lastmodified').text('(updated '+ lastmodified + ')');
			}

			$("#editButton").attr('href', 'edit.html?' + wikid_id);

			if (doc['-instance'] && doc['-instance'].schema) {

				$('#addButtonMenu').append($('<li><a href="'+ wikid.getTagEditHref(wikid_id,true) + '">New ' + result.topic +  '</a></li>'));
			} else {
			    var n = $('<li><a href="' + wikid.getTagEditHref(wikid_id,false) +'">Topic Tagged \'' + result.topic +  '\'</a></li>')
			    $('#addButtonMenu').append(n);
            }

			var tools = $('#toolsButtonMenu');
			tools.append('<li><a href="properties.html?' + wikid_id +'">Edit Properties</a></li>');

            var server = window.location.protocol + '//' + window.location.host + '/' + db_name;
			tools.append('<li><a href="/' + db_name +'/_design/tags/_list/freemind/by_id?topic='+wikid_id+'&server='+server+'">Recording Template</a></li>');
			if (result.tagged && result.tagged.length > 0) {
				tools.append('<li><a href="/' + db_name +'/_design/tags/_list/freemind/by_id?topic='+wikid_id+'&tags='+wikid_id+'&server='+server+'">Recording template, related only</a></li>');
			}
			tools.append('<li><a id="deleteTopic" href="#">Delete</a></li>');
			//tools.append('<li class="seperator"></li>');
			tools.append('<li><a href="/_utils/document.html?' + db_name + '/' +  wikid_id + '">View in Futon</a></li>');
			tools.append('<li><a href="/' + db_name + '/' +  wikid_id + '">View Raw JSON</a></li>');

			$('#deleteTopic').click(function() {
				// need a conf dialog
				db.deleteDoc(doc);
				// where do we go?
				window.location = "index.html";
				return false;
			});


			// tags that have data
			jQuery.each(result.fields, function(i) {
				var field = result.fields[i].name;
			    var row = $('<div class="tagdata corner"><div class="tagdataheader">' + field + '</div><div class="val"></div></div>');
				row.find(".val").append(_renderValue(result.fields[i].value));
				$('#Data').append(row);

                // console.dir(wikid);
                // if the field has a process function
                if (wikid[field] && wikid[field].process) {
                    wikid[field].process(result);
                }

			});
			
			// attachments
			if (result.attachments && result.attachments.length) {
				var row = $('<div class="tagdata corner"><div class="tagdataheader">Attachments</div><ul class="val"></div></div>');
				jQuery.each(result.attachments, function(i, attachment) {
					row.find(".val").append('<li><a href="/' + db_name + '/' +  wikid_id + '/' + attachment.name +'">' + attachment.name + '</a></li>');
				});
				$('#Data').append(row);
			}
			
			
			if (result.tagged && result.tagged.length > 0) {
                $("#tagged_title").text("See Also");
				$.each(result.tagged, function(i, tag) {
					var link = $("<li><a class='topic' href='"+ tag.href +"'>"+ tag.alias + "</a></li>");
					$("#tagged_as").append(link);
				});
			} else {
                $('#tagged_title').hide();
            }
			if (result.tags && result.tags.length > 0) {
				$.each(result.tags, function(i, tag) {
					$('#taglist').append('<a class="topic" href="' + tag.href +  '">' + tag.alias + '</a><span>&nbsp;</span>');
				});
			} else {
                $('#taglist').hide();
            }
            // freebase
            if (result.freebaseLink ) {
                var row = $('<div class="tagdata corner freebase"><div class="val"></div> <div class="freebase-attribution"> <img alt="Freebase CC-BY" height="23px" style="float: left; border: 0;" width="61px" src="http://www.freebase.com/policies/freebase-cc-by-61x23.png"/> <div style="font-size: x-small; margin-left: 70px; height: 30px; "> Source: <a href="http://www.freebase.com/view' +result.doc['-freebase_id']+ '"><span class="fbs-att-title">Topic</span></a> on <a href="http://www.freebase.com/">Freebase</a>, licensed under <a href="http://creativecommons.org/licenses/by/2.5/">CC-BY</a></div> </div> </div>');
                $.get(result.freebaseLink, null, function(data, status){
                    row.find(".val").html(data.html);
                    $('.fbs-att-title').text($('#fbs-flyout-title').text());
                }, 'jsonp');
                $('#Data').append(row);
            }

            // facebook
            if (result.facebookDetails) {
               var row = $('<div class="tagdata corner"><div class="tagdataheader">Facebook</div> <div class="val"></div></div>');
                $.get(result.facebookDetails.graphUrl, null, function(data, status){
                    var toShow = { name: data.name};
                    if (data.gender) toShow.gender = data.gender;
                    row.find(".val").append(_renderValue(toShow));
                    if (data.link) {
                        row.click(function() {
                            window.location = data.link;
                        });
                    }
                }, 'jsonp');
                $('#Data').append(row);
            }
			// expand all rendered json
			$("dt.collapsed").removeClass("collapsed").next().toggle();
            

            $(".spaceName").text(db_name);
            wikid.createTray(db, '#tray');
            wikid.createDragToTray(db, '#titleHolder', '#tray');


            // recent changes
            var dates = wikid.findRecentChangesByDate(db, 30);
            jQuery.each(dates, function(i, dateHolder) {
                var dateDiv = $('<div class="sidedate">'+ dateHolder.date +'</div>');
                $('#recentlyChanged').append(dateDiv);
                jQuery.each(dateHolder.links, function(j, link) {
                    var a = $('<div class="sidelink"><a class="topic" href=' + link.href +  '>' + link.alias + '</a></div>');
                    $('#recentlyChanged').append(a);
                });
            });

			
			$('.skype_tb_injection').live('click', function() {
				//alert('call skype!');
				$("#dialog-skype").dialog('open');
				
			});
			
			// search
			$('#search input').suggest(function(text, callback) {
				$.getJSON("/" + db_name + "/_all_docs?startkey=%22"+ text +"%22&endkey=%22"+ text +"zzz%22&limit=10", function(docs){
					  var matches = [];
					  for (var i = 0; i < docs.rows.length; i++) {
						if (docs.rows[i].id.indexOf(text) == 0) {
						  matches[i] = docs.rows[i].id;
						}
					  }
					  callback(matches);
				});
			}).keypress(function(e) {
				if (e.keyCode == 13) {
					window.location = 'topic.html?' + $(this).val();
				}
			});
			


            // Creating custom :external selector
            $.expr[':'].external = function(obj){
                return !obj.href.match(/^mailto\:/)
                        && (obj.hostname != location.hostname);
            };

            // Add 'external' CSS class to all external links
            $('a:external').addClass('external').attr('target', '_blank');

            function updatePlayhead() {
                var markers_offset = $('#markers').offset();
                var scrubber_offset = $('#scrubber a').offset();

                scrubber_offset.left = scrubber_offset.left - markers_offset.left + 29;
                scrubber_offset.top -= 22;
                var height = $('#markers').height();
                //var external_height = $('#external_tags_table').height();
                //height = height + external_height;
                height = height + "px";
                var left = scrubber_offset.left - 21;
                if (! $("#playhead").data('drag') ) {
                    $("#playhead").css({ 'left': left, 'height': height});
                }
                
            }


            if (result.recording) {
                // give some room
                $('#maincontent').css('overflow-x', 'scroll');

                var mediaName;
                $.each(result.recording['-media'], function(name, details) {
                    mediaName = name;
                });

                var url1 = '/' + db_name + '/' + wikid_id + '/-' + mediaName + '.mp3';
                var url2 = '/' + db_name + '/' + wikid_id + '/-' + mediaName + '.ogg';
                var disableScrubberUpdates = false;
                var timeToDiv = [];
                var iteration = 0
                $.jPlayer.timeFormat.showHour = true;

                $('#player').jPlayer({
                   swfPath: "scripts" ,
                    ready: function() {
                        this.element.jPlayer("setFile", url1, url2);
                        // look for an anchor in the url to play
                        if (location.hash) {
                            var anchor = location.hash.substr(1);
                            if(idToTag[anchor]) {
                                var tag = idToTag[anchor];
                                var startTime = tag.startTime;
                                $('#player').jPlayer('play');
                                $('#player').jPlayer('playHeadTime', startTime *1000);
                            }
                        }
                    },
                    "warningAlerts" : true,
                    preload: "auto",
                    customCssIds: false
                }).jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
                    $('#jplayer_play_time').text($.jPlayer.convertTime(playedTime));
                    $('#jplayer_total_time').text($.jPlayer.convertTime(totalTime));
                    if (!disableScrubberUpdates) {
                        $("#scrubber").slider('option', 'value', playedTime/1000 );
					    updatePlayhead();
                    }
                    iteration++;
                    if (iteration % 5 == 0) {
                        $.each(timeToDiv, function(i, val) {
                           var time = val.time;
                            if (time) {
                                var curTime = playedTime/1000;
                                if (time[0] <= curTime && time[1] >= curTime) {
                                    $(val.div).find(".streambar").addClass('ui-state-highlight');
                                }
                                else {
                                    var stbar = $(val.div).find(".streambar");
                                    if (!stbar.data('mouseover') ) {
                                        stbar.removeClass('ui-state-highlight');
                                    }
                                }
                            }
                        });
                    }
                });
                var div = $('#markers');
                var constWidth = div.width();
                var audioDuration = result.recording['-duration'];
                var pps = wikid.ui.calculatePixelsPerSecond(div.width(), audioDuration, 1);
                var spp = wikid.ui.calculateSecondsPerPixel(div.width(), audioDuration, 1);


                var band = $('<div id="timeband"></div>');
                div.append(band);
                band.width(constWidth);
                wikid.ui.createTimeBand(band,audioDuration, pps);

                div.append('<div id="scrubber"></div>');
                $("#scrubber").slider({
						range: false,
						min: 0,
						max: audioDuration,
						value: 0,
						start: function(event, ui) {
							disableScrubberUpdates = true;
						},
						stop:  function(event, ui) {
							var time = $('#scrubber').slider('option', 'value');
                            $('#player').jPlayer('playHeadTime', time *1000);
							disableScrubberUpdates = false;
						}
				}).width(constWidth);

                var player = {
                    play: function(time) {
                        $('#player').jPlayer('playHeadTime', time *1000);
                    }
                }

                var segments = wikid.findSegments(wikid_id,db).rows;
                segments = _.sortBy(segments, function(segment) { return segment.seconds});

               


                var segmentsDiv = $('<div id="segments"></div>');
                div.append(segmentsDiv);
                $.each(segments, function(i, segment) {
                    var segmentDiv = $('<div class="segment"></div> ');
                    if (segment.value.seconds > 30000) return;

                    if (segment.value.duration < spp) return;

                    var marginLeft = wikid.ui.calculateSecondsPixelSize(segment.value.seconds, pps);
	                var width = wikid.ui.calculateSecondsPixelSize(segment.value.duration, pps);

                    var speaker = segment.value.gender + '-' + segment.value.speaker;
                    segmentDiv.attr('title', speaker);
                    segmentDiv.data('gender', segment.value.gender);
                    segmentDiv.data('speaker', segment.value.speaker);
                    segmentDiv.css('margin-left', marginLeft + 'px');
	                segmentDiv.width(width);
                    segmentsDiv.append(segmentDiv);

                    segmentDiv.css( 'cursor' , 'pointer');
                    segmentDiv.mouseover(function() {
                        $(this).addClass('ui-state-highlight').css('z-index', '1');
                        $(this).data('mouseover', true);
                    }).mouseout(function() {
                        $(this).removeClass('ui-state-highlight').css('z-index', null);;
                        $(this).data('mouseover', false);
                    })
                    .click(function(){
                       player.play(segment.value.seconds);
                    });

                });
                $('.segment').heatcolor(function(){
                    var title = $(this).attr('title');
                    var gender = $(this).data('gender');
                    var speaker = $(this).data('speaker');
                    var range = speaker.substring(1);
                    return range;
                    
                }, {
                        lightness: 0.3
                    });

                var conversationTags = wikid.findConversationTags(wikid_id,db).rows;
                conversationTags = _.sortBy(conversationTags, function(tag){return tag.value.timestamp});
                var idToTag = {};
                $.each(conversationTags, function(i,conversationTag) {
                    var div1 = wikid.ui.showTag(div, conversationTag.value, 1262325200000, pps, player);
                    idToTag[conversationTag.id] = conversationTag.value;
                    timeToDiv.push({time:[conversationTag.value.startTime,conversationTag.value.endTime], div: div1});
                });
                var playhead = $('#playhead');
                playhead.draggable({
                    axis: "x",
                    containment: "#playheadHolder",
                    start: function() {
                        playhead.data('drag', true);
                    },
                    stop: function() {
                        var left = playhead.position().left;
                        
                        var seconds = Math.round(left * spp);
                        $('#player').jPlayer('playHeadTime', seconds *1000);
                        playhead.data('drag', false);
                    }
                }).mouseover(function() {
                    playhead.css('width', '3px');
                }).mouseout(function() {
                    playhead.css('width', '2px');
                });
                updatePlayhead();
                shortcut.add('Space', function() {
                    if ( $('#player').jPlayer("getData","diag.isPlaying")) {
                        $('#player').jPlayer('pause');
                    } else {
                        $('#player').jPlayer('play');
                    }
                }, {disable_in_input: true});
                shortcut.add('Right', function() {
                    var time = $('#player').jPlayer("getData","diag.playedTime");
                    var newTime = time + 30000;
                    $('#player').jPlayer('playHeadTime', newTime);
                }, {disable_in_input: true});
                shortcut.add('Left', function() {
                    var time = $('#player').jPlayer("getData","diag.playedTime");
                    var newTime = time - 30000;
                    $('#player').jPlayer('playHeadTime', newTime);
                }, {disable_in_input: true});
                shortcut.add('Shift+Right', function() {
                    var time = $('#player').jPlayer("getData","diag.playedTime");
                    var newTime = time + 600000;
                    $('#player').jPlayer('playHeadTime', newTime);
                }, {disable_in_input: true});
                shortcut.add('Shift+Left', function() {
                    var time = $('#player').jPlayer("getData","diag.playedTime");
                    var newTime = time - 600000;
                    $('#player').jPlayer('playHeadTime', newTime);
                }, {disable_in_input: true});

                $('#markers').lasso({
                    delay: 100,
                    stop: function(event, props) {
                        
                    }
                });

            }
            // There is a playlist to show
            if (result.playlist && result.playlist.length > 0) {

                var internalPlaylist = [];
                var internalIndex = 0;

                function playListChange( index ) {
                    //console.log(index);
                    internalIndex = index;
                    var recording = internalPlaylist[internalIndex];
                    //console.dir(recording);
                    $('#player').data('recording', recording);
                    $('#player').jPlayer('setFile', recording.url);
                    $('#player').jPlayer('play');
                    if (recording.startOffset) {
                        $('#player').jPlayer('playHeadTime', recording.startOffset);
                    }
                    var index = recording.index;
                    // highlight the one playing
                    $('.playlistItem').removeClass('ui-state-highlight');
                    $('.playlist .playlistItem:eq('+ index + ')').addClass('ui-state-highlight');


                }

                function playListNext() {
                    var index = (internalIndex+1 < internalPlaylist.length) ? internalIndex+1 : 0;
                    playListChange( index );
                }


                $.jPlayer.timeFormat.showHour = true;
                $('#player').jPlayer({
                   swfPath: "scripts" ,
                    "warningAlerts" : true,
                    preload: "auto",
                    customCssIds: false
                }).jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
                    var recording = $('#player').data('recording');
                    if (recording.endOffset && recording.endOffset > 0 && playedTime > recording.endOffset) {
                        playListNext();
                    }

                }).jPlayer("onSoundComplete", function() {
                    playListNext();
                });



                var playlistDiv = $('<div class="playlist"></div>').appendTo('#maincontent');
                $.each(result.playlist, function(i, item) {
                    var itemDiv = $('<div class="playlistItem"></div>').appendTo(playlistDiv);
                    itemDiv.data('item', item);
                    itemDiv.data('index', i);
                    var text = 'Tag';
                    if (item.text) text = item.text;
                    var date = new Date(item.start);
                    var end = new Date(item.end);
                    var duration = $.jPlayer.convertTime(item.end - item.start);
                    var dateText = date.toISOString();

                    var dateTextURL = date.toString("d-MMM-yyyy_h:mm:ss_tt");


                    itemDiv.append('<div class="playlistItemDate"><a href="timeline.html?'+ dateTextURL +'"><abbr class="timeago" title="'+dateText+'">'+dateText+'</abbr></a></div>');
                    itemDiv.append('<div class="playlistItemDuration">'+ duration +  '</div>');
                    itemDiv.append('<div class="playlistItemText">'+ text +  '</div>');
                    //itemDiv.mouseover(function() {
                    //    $(this).addClass('ui-state-highlight');
                    //}).mouseout(function() {
                    //    $(this).removeClass('ui-state-highlight');
                    //})
                    itemDiv.click(function() {
                        internalPlaylist = findRecordingsForItem(i, item);
                        playListChange( 0 )
                    })
                });


                function findRecordingsForItem(index, item) {
                    // hack atack. We need to put the recordings in the db?
                    var start = item.start - 3600000; // before on hour
                    var end =  item.end + 3600000; // after on hour
                    var results = db.view("audio/by_time", {startkey:  start, endkey: end});

                    var recordings = [];
                    $.each(results.rows, function(i, test) {
                        if (test.value.type == 'recording') {
                            //console.log('item:\t' + item.start + '\t' + item.end);
                            //console.log('test:\t' + test.value.start + '\t' + test.value.end );
                            //console.log('---');
                            if ((item.start <= test.value.end && item.end >= test.value.end) || (item.start <= test.value.start && item.end >= test.value.start) || (item.start >= test.value.start && item.end <= test.value.end)) {
                                var mediaName = _.keys(test.value.file)[0]
                                var url =  '/' + db_name + '/' + test.id + '/' + mediaName ;
                                var recording = {
                                     index: index,
                                     url: url
                                }
                                if (test.value.start <= item.start && item.start <= test.value.end) {
                                    var offset = item.start - test.value.start;
                                    recording.startOffset = offset;
                                }
                                if (test.value.start <= item.end && item.end <= test.value.end) {
                                    var offset = item.end - test.value.start ;
                                    recording.endOffset = offset;
                                }
                                recordings.push(recording);
                            }
                        }
                    });
                    //console.dir(recordings);
                    return recordings;

                }


            }




            if (!result.recording && result.playlist.length == 0){
                $('#player,.jp-single-player').hide();
            }


            // link drop targets
            $('.topic').draggable({opacity: 0.7, helper: "clone"});

            _.delay(function() {
                 // fix the topic height for the size of the Data section
                var minHeight = $('#Data').height() + 150;
                var curHeight = $('#maincontent').height();
                if (minHeight > curHeight) {
                    $('#maincontent').css('min-height', minHeight + 'px');
                }

            }, 500);
            //do all the time ago
            $('abbr.timeago').timeago();



		});
	 </script>
<style type="text/css">
    .ui-slider-horizontal .ui-slider-handle {
    background: white url(styles/images/ui-icons_222222_256x240.png) no-repeat scroll 50% 50%;
        background-position: -64px 0;
        border-style: 1px solid #CECECE;
        cursor: move;
        z-index: 21;
    }
    .ui-slider-horizontal {
        border-style: none;
    }
</style>
</head>
<body>
<div class="breadcrumbBar">
    <a href="myspaces.html">My Spaces</a> >> <a class="spaceName" href="index.html"></a> >> <span class="readableId" href="dashboard.html"></span>
</div>
<div class="logo">
    <img  src="images/corner_logo.png" alt="Eckoit Logo" />
</div>
<div class="colmask holygrail">
    <div class="colmid">
        <div class="colleft">
            <div class="col1wrap">
                <div class="col1">
                    <div class="taboverhead">
                    </div>
                    <div class="tabheader">
                        <div class="maintabs">
                            <ul id="tabnav">
                                <li id="Info-tab"><a href="#" class="maintab active">Topic</a></li>
                              
                            </ul>
                        </div>
						<div class="search" id="search">
							<input type="text" name="q" placeholder="Search"/>
						</div>
                    </div>
					<!-- Column 1 start -->
                    <div id="maincontent">
						<div>
						<ul id="menu-h" class="horizontal">
							<li><a id="editButton" href="" title="Edit"><span></span>Edit</a>
							</li>
							<li><a id="addButton" title=""><span></span>Add</a>
								<ul  id="addButtonMenu">

								</ul>
							</li>
							<li><a title=""><span></span>Tools</a>
								<ul  id="toolsButtonMenu">

								</ul>
							</li>
						</ul>
						
						</div>
                        <div id="titleHolder" id="title">
                            <span class="ui-icon ui-icon-grip-dotted-vertical"></span>
                            <span id="title"  class="readableId padcontent" title=""></span>
                        </div>
                        <div id="lastmodified" class="padcontent"></div>
                        <div id="taglist"></div>





                        <div id="Info" class="padcontent content-container">



                         <div>

                            <div id="Data"></div> 
                            <div id="Wiki"></div>

                            <div id="Tagged">
                                <div id="tagged_title" class="padcontent"></div>
                                <ul id="tagged_as">
                                </ul>
                            </div>
                          </div>
                        </div>
                         <div id="player" class="jp-single-player">
                         </div>
                         <div  class="jp-single-player">
                              <div class="jp-interface">
                                <ul class="jp-controls">
                                  <li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
                                  <li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
                                  <li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
                                  <li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
                                </ul>
                                
                                <div id="jplayer_volume_bar" class="jp-volume-bar">
                                  <div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
                                </div>
                                <div id="jplayer_play_time" class="jp-play-time"></div>
                                <div id="jplayer_total_time" class="jp-total-time"></div>
                              </div>
                         </div>

                         <div id="markers">

                             <div id="playheadHolder">
                                 <div id="playhead" ></div>
                             </div>
                         </div>
                    </div>
					<!-- Column 1 end -->

                </div>
            </div>
            <div class="col2">
				<!-- Column 2 start -->
                <div class="span-3 left">


                    <a href="edit.html">New Topic</a><br/>
                    <a href="timeline.html">Timeline</a><br/>
                    <div id="tray">

                    </div>
                    <div id="recentlyChangedHolder">
                        <h2>Recently Changed</h2>
                        <div id="recentlyChanged"></div>
                    </div>


		        </div>
                <!-- Column 2 end -->
            </div>
            <div class="col3">
				<!-- Column 3 start -->
					<div id="sda">
                        <div id="sda_header">
                            Sponsors
                        </div>
                        <div id="create">
                            <a href="http://google.com">Create an Ad.</a>
                        </div>
                        <div class="sponsor">
                            <div class="sp_title"><a href="http://google.com">Healthcare Job Training</a></div>
                            <div class="sp_image"><img src="images/sda/2.jpg" /></div>
                            <div class="sp_body">Quickly become a trained Medical Office Assistant. Quality career training, Fast! Take your first step. Visit us now.</div>
                        </div>
					</div>
				
				<!-- Column 3 end -->
            </div>
        </div>
    </div>
</div>
<div id="dialog-skype" title="Tag Skype Conversation?">
	<p>It appears you are dialing out using the skype plugin. Would you like to tag this conversation?</p>
</div>

</body>
</html>
